﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/editor.md-master/css/editormd.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/tagit/jquery.tagit.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/tagit/tagit.ui-zendesk.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/resource/js/webuploader-0.1.5/webuploader.css">
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">发布文章</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
	            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
	            <li><a href="#">Dashboard</a></li>
	            <li class="active">Current page</li>
	        </ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<div class="panel-body">
					<form class="col s12" id="form1" enctype="multipart/form-data" th:action="@{/admin/archives/add}" onsubmit="return validateForm();" method="post">
						<input name="categoryId" type="hidden" th:value="${category.id}"/>
						<input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'html' or ${field.dataType} == 'markdown' or ${field.dataType} == 'file'" />
						<input name="imagePath" id="filepath" type="hidden">
						<div class="form-group form-control-medium">
							<label for="title">文章标题：</label>
							<input id="title" name="title" type="text" class="form-control">
						</div>
						<div class="form-group form-control-small">
                            <label for="weight">权重：</label>
                            <input id="weight" name="weight" type="text" class="form-control">
						</div>
						<div class="form-group form-control-small">
                            <label for="clicks">点击：</label>
                            <input id="clicks" name="clicks" type="text" class="form-control">
						</div>
						<div class="form-group form-control-medium">
							<label for="properties">自定义属性：</label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="properties" id="h" value="h">头条[h]
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="properties" id="b" value="b">加粗[b]
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="properties" id="f" value="f">幻灯[f]
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="properties" id="p" value="p">图片[p]
                            </label>
						</div>
						<div class="form-group form-control-medium">
							<label for="imagePath">缩略图：</label>
							<div id="uploader" class="wu-example">
							    <!--用来存放文件信息-->
							    <div id="file-priview" class="file-priview"></div>
							    <div class="btns">
							        <div id="picker">选择文件...</div>
							    </div>
							</div>
						</div>
						<div class="form-group form-control-medium">
							<label for="categoryId">所属栏目：</label>
							<input id="categoryId" type="text" class="form-control" th:value="${category.cnname}" readonly="readonly">
						</div>
						<div class="form-group form-control-medium">
							<label for="tag">标签：</label>
							<ul id="myULTags"></ul>
						</div>
						<div class="form-group">
							<label for="description">内容摘要：</label>
							<textarea id="description" name="description" class="form-control"></textarea>
						</div>
						
						<div th:each="field : ${fields}" th:class="${field.dataType} == 'varchar' or ${field.dataType} == 'char' or ${field.dataType} == 'file' or ${field.dataType} == 'select' ? 'form-group form-control-medium' : 'form-group'">
							<!-- 提示文字 -->
							<label for="description" th:attr="for=${field.id}" th:text="${field.fieldText}+'：'"></label>
							<!-- 单行文本框（CHAR和VARCHAR） -->
							<input th:id="${field.id}" th:name="${field.fieldName}" type="text" class="form-control" th:if="${field.dataType} == 'varchar' or ${field.dataType} == 'char'">
							<!-- 多行文本框（TEXTAREA） -->
							<textarea th:id="${field.id}" th:name="${field.fieldName}" class="form-control" th:if="${field.dataType} == 'textarea'"></textarea>
							<!-- MARKDOWN -->
							<div class="mdeditor" th:id="'md-editormd-'+${field.id}" th:if="${field.dataType} == 'markdown'"></div>
							<!-- UEDITOR -->
							<script th:id="'ue-editor-'+${field.id}" type="text/plain" style="width:100%;height:320px;" th:if="${field.dataType} == 'html'"></script>
							<!-- 文件上传（FILE） -->
							<div th:id="'uploader-'+${field.id}" class="wu-example" th:if="${field.dataType} == 'file'">
							    <!--用来存放文件信息-->
							    <div th:id="'file-priview-'+${field.id}" class="file-priview"></div>
							    <div class="btns">
							        <div th:id="'picker-'+${field.id}">选择文件...</div>
							    </div>
							</div>
				            <!-- 单选（RADIO） -->
                            <div class="row" th:if="${field.dataType} == 'radio'">
	                            <div class="checkbox-item" th:each="radio : ${#strings.arraySplit(field.defaultValue,',')}">
		                            <label class="checkbox-inline">
		                                <input type="radio" th:name="${field.fieldName}" th:id="${field.id}+'-'+${radio}" th:value="${radio}" th:text="${radio}">
		                            </label>
	                            </div>
	                            <div class="clearfix"></div>
                            </div>
                            <!-- 多选（CHECKBOX） -->
                            <div class="row" th:if="${field.dataType} == 'checkbox'">
	                            <div class="checkbox-item" th:each="checkbox : ${#strings.arraySplit(field.defaultValue,',')}">
		                            <label class="checkbox-inline">
		                                <input type="checkbox" th:name="${field.fieldName}" th:id="${field.id}+'-'+${checkbox}" th:value="${checkbox}" th:text="${checkbox}">
		                            </label>
	                            </div>
	                            <div class="clearfix"></div>
                            </div>
                            <!-- 下拉框（SELECTED） -->
                            <select class="form-control m-b-10" th:name="${field.fieldName}" th:if="${field.dataType} == 'select'">
                            	<option th:each="item : ${#strings.arraySplit(field.defaultValue,',')}" th:text="${item}"></option>
                            </select>
						</div>
						<div class="form-group">
							<div class="col-lg-3">
								<label for="comment">允许评论：</label>
	                            <label class="checkbox-inline">
	                                <input type="radio" name="comment" id="comment-yes" value="1" checked="">是
	                            </label>
	                            <label class="checkbox-inline">
	                                <input type="radio" name="comment" id="comment-no" value="0">否
	                            </label>
                            </div>
                            <div class="col-lg-3">
	                            <label for="subscribe">允许订阅：</label>
	                            <label class="checkbox-inline">
	                                <input type="radio" name="subscribe" id="subscribe-yes" value="1" checked="">是
	                            </label>
	                            <label class="checkbox-inline">
	                                <input type="radio" name="subscribe" id="subscribe-no" value="0">否
	                            </label>
                            </div>
                            <div class="col-lg-6"></div>
                            <div style="clear:both;"></div>
						</div>
						<div class="form-btn-group-left">
			            	<button type="submit" class="btn btn-info">保存</button>
			            </div>
					</form>
				</div>
			</section>
		</div>
	</div>
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
    <script src="/resource/js/editor.md-master/editormd.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.all.min.js"></script>
    <script src="/resource/js/tagit/jquery-ui.min.js"></script>
    <script src="/resource/js/tagit/tag-it.js"></script>
    <script type="text/javascript" src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
    <script type="text/javascript" src="/resource/js/jQueryMessage/js/jquery.plugin.message.js"></script>
    
    <script type="text/javascript" th:inline="javascript">
	    var fields = [[${fields}]];
        var thumbnailWidth = 178,thumbnailHeight = 178;
	    
	    $(document).ready(function () {
	    	initUploader("picker","file-priview","filepath");
	    	for(var i = 0;i < fields.length;i++){
	    		var field = fields[i];
		    	if(field.dataType == 'markdown'){
		    		initMdEditor(field.id, "md-editormd-" + field.id);
		    	}else if(field.dataType == 'html'){//初始化UE编辑器
		    		window[field.id] = UE.getEditor('ue-editor-' + field.id);
		    	}else if(field.dataType == 'file'){
		    		console.log($("#upload-"+field.id));
		    		initUploader("picker-" + field.id, "file-priview-" + field.id, "input-" + field.id);
		    	}
		    }
	    	
	    	var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
	    	$('#myULTags').tagit({
	    		availableTags: sampleTags,
                itemName: 'item',
                fieldName: 'tag'
            });
	    });
	    
	    //
	    function initUploader(picker,el,inputEl){
	    	var uploader = WebUploader.create({
	    		auto: true,
		        // swf文件路径
		        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
		        // 文件接收服务端。
		        server: '/upload/uploadFile',
		        // 选择文件的按钮。可选。
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '#' + picker,
		        fileNumLimit: 1,
		        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		        resize: false
		    });
	    	uploader.on('fileQueued', function(file) {
	    		$("#"+el).children().remove();
	    		$img = $("<img />");
	    		uploader.makeThumb( file, function(error, src) {
	    	        if ( error ) {
	    	            $img.replaceWith('<span>不能预览</span>');
	    	            return;
	    	        }
	    	        $img.attr( 'src', src );
	    	    }, thumbnailWidth, thumbnailHeight );
	    	    $("#"+el).append($img);
	    	});
		    uploader.on('uploadSuccess', function(file, response) {
		    	console.log(response);
		    	$("#"+el).children().remove();
		        $("#"+el).append($("<img src='"+response.data.url+"'/>"));
		        $("#"+inputEl).val(response.data.filepath);
		    });
		    uploader.on('uploadError', function( file ) {
		    	$("body").MessageBox({
					type: 'error',
					message: '上传失败！',
					timeout:3000,
					callbak:null
				});
		    });
	    }
	    
	    function initMdEditor(id,el){
	    	console.log(id);
	    	//初始化MD编辑器
	    	window[id] = editormd(el, {
                width: "100%",
                height: 350,
                path : '/resource/js/editor.md-master/lib/',
                markdown : null,
                codeFold : true,
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
                emoji : true,
                taskList : true,
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/upload/uploadMarkDown",
                onload : function() {
                    console.log('onload', this);
                }
            });
	    }
	    
	    function validateForm(){
	    	for(var i = 0;i < fields.length;i++){
	    		var field = fields[i];
		    	if(field.dataType == 'markdown'){
		    		$("#input-"+ field.id).val(window[field.id].getMarkdown());
		    	}else if(field.dataType == 'html'){//初始化UE编辑器
		    		$("#input-"+ field.id).val(window[field.id].getContent());
		    	}
		    }
	    	return true;
	    }
    </script>
</body>
</html>
